eslint-plugin-react-hooks

What is eslint-plugin-react-hooks?

The eslint-plugin-react-hooks package is an ESLint plugin that enforces the Rules of Hooks for React. It helps developers to follow the best practices and avoid common pitfalls when using hooks in React components.

What are eslint-plugin-react-hooks's main functionalities?

Rules of Hooks

This feature enforces the rules of hooks, ensuring that hooks are called in the same order on every render and not inside conditions, loops, or nested functions.

/* eslint react-hooks/rules-of-hooks: 'error' */
const MyComponent = () => {
  if (condition) {
    const [value, setValue] = useState(0); // This will cause an error
  }
  return <div>{value}</div>;
};

Exhaustive Dependencies

This feature ensures that all dependencies used inside useEffect, useCallback, and useMemo are properly specified, helping to avoid stale closures and other related bugs.

/* eslint react-hooks/exhaustive-deps: 'warn' */
useEffect(() => {
  // Should include dependencies used inside the effect
}, []); // This will cause a warning if dependencies are omitted

Other packages similar to eslint-plugin-react-hooks

eslint-plugin-react

This package includes linting rules for React and JSX. It is broader in scope than eslint-plugin-react-hooks, covering a wide range of React best practices and potential errors, not limited to hooks.

eslint-plugin-hooks

This is a less popular and potentially less maintained alternative to eslint-plugin-react-hooks. It may offer similar functionality but does not have the same level of community support or frequent updates.

README

eslint-plugin-react-hooks

This ESLint plugin enforces the Rules of Hooks.

It is a part of the Hooks API for React.

Installation

Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly.

Assuming you already have ESLint installed, run:

# npm
npm install eslint-plugin-react-hooks --save-dev

# yarn
yarn add eslint-plugin-react-hooks --dev

Then add it to your ESLint configuration:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Valid and Invalid Examples

Please refer to the Rules of Hooks documentation and the Hooks FAQ to learn more about this rule.

For feedback about the exhaustive-deps rule, please post in this thread.

License

MIT